<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 右侧主界面    模板 -->
    <!-- 引入样式 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


    <style type="text/css">
        #con{
            text-align: center;
        }
    </style>

</head>
<body>

    <div id="con" style="width: 600px;margin-left: 300px" >
        <el-form   ref="form" :model="form" label-width="80px"   :rules="editFormRules">
            <el-input type="hidden" v-model="form.testid" disabled></el-input>
            <el-form-item label="资料清单:" >
                <el-input v-model="form.qingdan" disabled></el-input>
            </el-form-item>
            <el-form-item label="资料请求:">
                <el-input v-model="form.qingqiu" disabled></el-input>
            </el-form-item>

            <el-form-item label="标题内容"  prop="caption">
                <el-input v-model="form.caption"></el-input>
            </el-form-item>

            <el-form-item label="单位名称">
                <el-input v-model="form.name" disabled></el-input>
            </el-form-item>

            <el-form-item label="申报年份">
                <el-input v-model="form.year" disabled></el-input>
            </el-form-item>


            <el-form-item label="申报等级">
                <el-input v-model="form.grading" disabled></el-input>
            </template></el-form-item><br>


            <el-form-item label="资料上传:" prop="filepath" >
                <el-upload
                        class="upload-demo"
                        action="/dataquery/upload"
                        :on-change="addFile"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :on-success="success"
                        multiple
                        :limit="1"
                        accept=".txt,.docx,.doc,.xlsx"
                        :on-exceed="handleExceed"
                        :file-list="form.filepath">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <span slot="tip" class="el-upload__tip">只能上传文件，且不超过500kb</span>
                </el-upload>
            </el-form-item>

            <el-form-item label="内容介绍:" prop="companyre">
                <el-input type="textarea" resize="none" rows="3" v-model="form.companyre" placeholder="500字以内" style="width:380px" ></el-input>
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer" style="margin-left: 10%">
            <el-button type="primary" @click="onSubmit('form')" >提交</el-button>
            <el-button type="primary" @click="dialogVisible = true">取消</el-button>
        </div>

</div>
<!--</div>-->
</body>
<script>
    var vue=new Vue({
        el:"#con",
        data:{

            fileList: [{}],
            form:{
                qingdan:"",
                qingqiu:"",
                name:"",
                caption:"",
                year:"",
                value:"",
                companyre:"",
                testid:"",
            },
            editFormRules:{
                caption:[
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                companyre:[
                    { required: true, message: '请选择等级', trigger: 'blur' }
                ]
            }
        },created:function () {
            var self=this;


            axios.post('/dataquery/getSBXM').then(function(response){
                self.form.qingdan=response.data.cldetailed;
                self.form.qingqiu=response.data.clrequest;
                self.form.year=response.data.name;
                self.form.name=response.data.DWname;
                self.form.grading=response.data.grading;
                self.form.testid=response.data.id;

            });
        },methods:{
            onSubmit:function(f){
      this.$refs[f].validate((valid) => {
                var self=this;
                var companyre=self.form.companyre;
                var qingdan=self.form.qingdan;
                var  qingqiu=self.form.qingqiu;
                var  name=self.form.name;
                var  caption=self.form.caption;
                var  year=self.form.year;
                var grading=self.form.grading;
                var  value=self.form.value;
                var falePath=self.form.filepath;
                var id=self.form.testid;
                var maaaap={"id":id,"grading":grading,"falePath":falePath,"companyre":companyre,"qingdan":qingdan,"qingqiu":qingqiu,"name":name,"caption":caption,"year":year,"value":value};

                var qq={"qingdan":qingdan};
        if (valid) {
                axios.post('/dataquery/chachong',qq).then(function(response){

                        if (response.data.rep==1){
                            self.$notify.error({
                                title: '此项申报已提交',
                                message: '请勿重复提交'
                            });

                        }

                        if (response.data.rep==0){
                            axios.post('/dataquery/insertdata',maaaap).then(function(response){
                                const h = self.$createElement;
                                self.$notify({
                                    title: '提交成功',
                                    message: h('i', { style: 'color: teal'}, '请等待审核员审核')
                                });
                            });
                        }
                });
        }else {
            console.log('error submit!!');
            return false;
        }
      })


            },

            ///文件上传方法
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            }
        }

    })

</script>

</html>